<template>
  <div class="login_container">
    <div class="avatar_box">登录</div>
    <el-main class="login_box">
      <el-form
        :model="form"
        :rules="rules"
        label-width="0px"
        class="login_form"
        ref="ruleRorm"
      >
        <el-form-item prop="username" size="large">
          <el-input
            v-model="form.username"
            size="large"
            placeholder="账号"
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item size="large" prop="password">
          <el-input
            v-model="form.password"
            size="large"
            placeholder="密码"
            :prefix-icon="Lock"
          />
        </el-form-item>
        <div class="btns">
          <div class="login" @click="login">登录</div>
          <div class="rest" @click="reset">重置</div>
        </div>
      </el-form>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

import { User, Lock } from '@element-plus/icons-vue'

import { FormInstance, FormRules } from 'element-plus'

import { useStore } from '@/store'

const { useUserStore } = useStore()

import type { FormValue } from '@/store/modules'
// import { ssoLogin } from '@/sso'

const rules = reactive<FormRules<FormValue>>({
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const ruleRorm = ref<FormInstance>()

const form = reactive<FormValue>({})

const login = () => {
  ruleRorm.value?.validate((valid) => {
    if (!valid) return
    useUserStore().loginForm({ ...form })
  })
}

const reset = () => {
  ruleRorm.value?.resetFields()
}

// ssoLogin()
</script>

<style lang="scss" scoped>
$bg_color: rgba(255, 255, 255, 0.5);

.login_container {
  height: 100%;
  background: url('@/assets/login/login_bg.jpg') no-repeat top center;
  background-size: cover;
  position: relative;
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-weight: 600;
    font-size: 26px;
  }
  .login_box {
    width: 550px;
    height: 430px;
    background-color: $bg_color;
    border-radius: 4px;
    //div居中
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.btns {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10%;
  div {
    width: 120px;
    height: 44px;
    border-radius: 20px;
    line-height: 44px;
    text-align: center;
    background: linear-gradient(to right, #5179d9, #65a9f4);
    color: #fff;
    &:last-child {
      margin-left: 20px;
    }
    &:hover {
      cursor: pointer;
      background: #ecf5ff;
      color: #409eff;
    }
  }
}

.login_form {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20%;
  width: 80%;
  padding: 0 20px;
  box-sizing: border-box;
  :deep(.el-form-item) {
    margin-bottom: 26px;
  }
}
</style>
